/*
 * @Descripttion:
 * @version:
 * @Author: cx
 * @Date: 2021-01-28 19:52:56
 * @LastEditors: cx
 * @LastEditTime: 2021-02-01 13:44:00
 */
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

interface Props {
  menuData: MenuItem[];
  /** 当前路径 */
  path: string;
}
/**
 * 将所有文章标题展示出来
 */
export default (props: Props) => {
  const { menuData, path } = props;
  const [current, setCurrent] = useState({} as any);

  useEffect(() => {
    if (menuData.length !== 0) {
      const pathname = path;
      const moduleName = pathname.slice(
        pathname.lastIndexOf("/") + 1,
        pathname.length
      );
      setCurrent(
        menuData.find((f: { path: string }) => f.path.includes(moduleName))
      );
    }
  }, [menuData]);

  return (
    <div className="page">
      <h1>{current && current.name}</h1>
      <ul>
        {current &&
          current.children &&
          current.children.map(
            (item: { children: MenuItem; path: string; name: string }) => {
              return !item.children ? (
                <li style={{ listStyle: "circle" }} key={`${item.path}`}>
                  <Link to={item.path}>{item.name}</Link>
                </li>
              ) : null;
            }
          )}
      </ul>
    </div>
  );
};
